<script>
export default {
  props: {
    sliderNum: {
      type: [String, Number],
      default: 1,
    },
    autoPlay: {
      type: Boolean | undefined,
      default: false,
    },
    autoPlayTime: {
      type: [Number],
      default: 0,
    },
    gap: {
      type: [Number],
      default: 0,
    },
    datasource: {},
    speed: {
      type: [Number],
      default: 1000,
    },
  },
  render() {
    let slotList = [];
    for (let data of this.datasource) {
      let slot = this.$scopedSlots.default({ item: data });
      slotList.push(slot);
    }

    //复制
    if (this.sliderNum <= this.datasource.length) {
      let index = 0;
      for (let data of this.datasource) {
        let slot = this.$scopedSlots.default({ item: data });
        index == this.datasource.length - 1
          ? slotList.unshift(slot)
          : slotList.push(slot);
      }
    }

    let swiperDOM = (
      <div class="swiper-comp-container">
        <div class="swiper-comp-wrapper" ref="wrapper">
          {slotList}
        </div>
      </div>
    );
    return swiperDOM;
  },
  data() {
    return {
      normalStep: 0,
      length: 0,
      currentTranslate: 0,
      currentIndex: 1,
      isReady: false,
    };
  },
  mounted() {
    this.p = this.$refs["wrapper"];
    // this.p.addEventListener("mouseover", this.stopTimer);
    // this.p.addEventListener("mouseleave", this.startTimer);
  },
  methods: {
    refresh() {
      this.isReady = false;
      if (this.sliderNum > this.datasource.length) {
        let sliderList = this.p.children;
        let pheight = this.p.clientHeight;
        this.generateNewSliderList(sliderList, pheight);
        return;
      }

      let pheight = this.p.clientHeight;
      this.normalStep =
        (pheight - (this.sliderNum - 1) * this.gap) / this.sliderNum + this.gap;
      this.currentTranslate = -this.normalStep;
      this.currentIndex = 1;
      this.p.style["transition-duration"] = "0ms";
      this.p.style[
        "transform"
      ] = `translate3d(0px, ${this.currentTranslate}px , 0px)`;

      this.length = this.datasource.length;
      let sliderList = this.p.children;
      this.generateNewSliderList(sliderList);
      let first = this.p.children[0];
      let last = this.p.children[this.p.children.length - 1];
      this.p.insertBefore(last, first);
      this.isReady = true;
      setTimeout(() => {
        this.p.style["transition-duration"] = this.speed + "ms";
      });

      if (this.autoPlay) {
        clearTimeout(this.autoPlayTimer);
        this.autoPlayProcessor();
      }
    },
    generateNewSliderList(sliderList, pheight) {
      for (let slider of sliderList) {
        if (!pheight) {
          slider.style["height"] = this.normalStep - this.gap + "px";
        } else {
          slider.style["height"] =
            (pheight - (this.sliderNum - 1) * this.gap) / this.sliderNum + "px";
        }
        slider.style["margin-right"] = this.gap + "px";
        slider.style["flex-shrink"] = 0;
      }
    },
    swipeLeft(cb) {
      if (this.loading) return;
      this.loading = true;
      this.currentIndex--;
      if (this.currentIndex == -1) {
        this.currentIndex = this.length;
        this.currentTranslate = -1 * this.normalStep * this.length;
        this.p.style["transition-duration"] = "0ms";
        this.p.style[
          "transform"
        ] = `translate3d(0px, ${this.currentTranslate}px , 0px)`;
        setTimeout(() => {
          this.currentIndex--;
          this.currentTranslate = this.currentTranslate + this.normalStep;
          this.p.style["transition-duration"] = this.speed + "ms";
          this.p.style[
            "transform"
          ] = `translate3d(0px, ${this.currentTranslate}px , 0px)`;
          this.loading = false;
          cb && cb();
        });
      } else {
        this.currentTranslate = this.currentTranslate + this.normalStep;
        this.p.style["transition-duration"] = this.speed + "ms";
        this.p.style[
          "transform"
        ] = `translate3d(0px, ${this.currentTranslate}px , 0px)`;
        this.loading = false;
        cb && cb();
      }
    },
    swipeRight(cb) {
      if (this.loading) return;
      this.loading = true;
      this.currentIndex++;
      if (this.currentIndex == this.length + this.length - this.sliderNum + 1) {
        this.currentIndex = this.length - this.sliderNum;
        this.currentTranslate =
          -1 * (this.length - this.sliderNum) * this.normalStep;
        this.p.style["transition-duration"] = "0ms";
        this.p.style[
          "transform"
        ] = `translate3d(0px, ${this.currentTranslate}px , 0px)`;
        this.currentIndex++;
      }
      setTimeout(() => {
        this.currentTranslate = this.currentTranslate - this.normalStep;
        this.p.style["transition-duration"] = this.speed + "ms";
        this.p.style[
          "transform"
        ] = `translate3d(0px, ${this.currentTranslate}px , 0px)`;
        this.loading = false;

        this.swipeCallBackTimer = setTimeout(() => {
          cb && cb();
        }, this.speed);
      }, 50);
    },
    left() {
      // this.stopTimer();
      this.swipeLeft(this.startTimer);
    },
    right() {
      // this.stopTimer();
      this.swipeRight(this.startTimer);
    },
    autoPlayProcessor() {
      if (!this.autoPlay) return;
      clearTimeout(this.autoPlayTimer);
      this.autoPlayTimer = setTimeout(() => {
        this.swipeRight(this.autoPlayProcessor);
      }, this.autoPlayTime);
    },
    // stopTimer() {
    //   if (!this.isReady) return;
    //   clearTimeout(this.swipeCallBackTimer);
    //   clearTimeout(this.autoPlayTimer);
    // },
    // startTimer() {
    //   if (!this.isReady) return;
    //   this.autoPlayProcessor();
    // },
  },
  beforeDestroy() {
    clearTimeout(this.autoPlayTimer);
  },
};
</script>

<style lang="less" scoped>
.swiper-comp-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.swiper-comp-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  transition-property: transform;
  will-change: transform;
  transition-timing-function: linear;
  transition-duration: 0;
}
</style>